<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户管理</title>
    <script src="asserts/plugins/jquery/jquery-3.6.0.min.js"></script>
    <script src="asserts/plugins/bootstrap/js/bootstrap.js"></script>
    <link href="asserts/plugins/bootstrap/css/bootstrap.css" rel="stylesheet">
    <script>
        $(document).ready(function () {
            fetchAllUsers();

            // 绑定搜索按钮点击事件
            $('#search').on('click', function () {
                var name = $('input[name="userName"]').val();
                var gender = $('input[name="gender"]:checked').val();

                if (name && gender) {
                    searchByNameAndGender(name, gender);
                } else if (name) {
                    searchByName(name);
                } else if (gender) {
                    searchByGender(gender);
                } else {
                    fetchAllUsers();
                }
            });


            // 删除用户
            $(document).on('click', '.btn-delete', function () {
                var userId = $(this).data('id');
                if (confirm("确定要删除该用户吗？")) {
                    $.ajax({
                        url: '/admin/AdminController',
                        data: {
                            type: 'deleteUser',
                            userId: userId
                        },
                        method: 'POST',
                        dataType: 'json',
                        success: function (respResult) {
                            if (respResult.status === 500) {
                                alert("删除失败");
                            } else {
                                alert("删除成功");
                                fetchAllUsers();
                            }
                        }
                    });
                }
            });
        });

        // 获取所有用户
        function fetchAllUsers() {
            $.ajax({
                url: '/admin/AdminController',
                data: {
                    type: 'getAllUsers'
                },
                method: 'GET',
                dataType: 'json',
                success: function (respResult) {
                    if (respResult.status === 500) {
                        alert("页面加载失败");
                    } else {
                        renderUsers(respResult.data);
                    }
                }
            });
        }


        // 根据性别搜索
        function searchByGender(gender) {
            $.ajax({
                url: '/admin/AdminController',
                data: {
                    type: 'getUserBySex',
                    sex: gender
                },
                method: 'GET',
                dataType: 'json',
                success: function (respResult) {
                    if (respResult.status === 500) {
                        alert("搜索失败");
                    } else {
                        renderUsers(respResult.data);
                    }
                }
            });
        }

        // 根据姓名模糊搜索
        function searchByName(name) {
            $.ajax({
                url: '/admin/AdminController',
                data: {
                    type: 'getUserByName',
                    name: name
                },
                method: 'GET',
                dataType: 'json',
                success: function (respResult) {
                    if (respResult.status === 500) {
                        alert("搜索失败");
                    } else {
                        renderUsers(respResult.data);
                    }
                }
            });
        }

        // 根据姓名和性别联合搜索
        function searchByNameAndGender(name, gender) {
            $.ajax({
                url: '/admin/AdminController',
                data: {
                    type: 'getUserByNameAndSex',
                    name: name,
                    sex: gender
                },
                method: 'GET',
                dataType: 'json',
                success: function (respResult) {
                    if (respResult.status === 500) {
                        alert("搜索失败");
                    } else {
                        renderUsers(respResult.data);
                    }
                }
            });
        }

        // 渲染用户表格
        function renderUsers(data) {
            let tr = '';
            // 遍历数据数组，为每个用户生成表格行（tr）的HTML字符串
            for (let i = 0; i < data.length; i++) {
                tr += "<tr><td>" + data[i].uId + "</td>" +
                    "<td>" + data[i].uEmail + "</td>" +
                    "<td>" + data[i].uName + "</td>" +
                    "<td>" + data[i].uSex + "</td>" +
                    // 根据用户角色，显示不同的标签
                    "<td>" + (data[i].uRole === 1 ? "管理员" : "会员") + "</td>" +
                    // 为每个用户添加一个删除按钮，按钮中包含该用户的uId作为数据属性
                    "<td><button class='btn btn-danger btn-delete' data-id='" + data[i].uId + "'>删除</button></td>" +
                    "</tr>";
            }
            // 将生成的所有表格行HTML字符串设置为#user-table tbody元素的内容
            $('#user-table tbody').html(tr);
        }


    </script>
</head>
<body>
<div class="container">
    <div class="row mb-3">
        <div class="col-md-4">
            <input type="text" class="form-control search-input" placeholder="请输入用户名" name="userName">
        </div>
        <div class="col-md-3">
            <div class="form-group form-inline">
                <span>性别</span>
                &nbsp;&nbsp;&nbsp;&nbsp;
                <label class="radio-inline">
                    <input type="radio" name="gender" value="男"> 男
                </label>
                <label class="radio-inline">
                    <input type="radio" name="gender" value="女"> 女
                </label>
            </div>
        </div>
        <div class="col-md-3 search-buttons">
            <button type="button" class="btn btn-primary search-button" id="search"><span class="glyphicon glyphicon-search"> 搜索</span>
            </button>
        </div>
    </div>
    <div class="row">
        <table class="table table-bordered table-hover" id="user-table">
            <thead>
            <tr id="tr">
                <th>编号</th>
                <th>邮箱</th>
                <th>姓名</th>
                <th>性别</th>
                <th>类别</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody>
            </tbody>
        </table>
    </div>
</div>
</body>
</html>


